<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SQLFlow: Visualize column impact and data lineage to track columns across transformations by analyzing SQL query.</title>
	<meta name="description" content="SQLFlow: Visualize column impact and data lineage to track columns across transformations by analyzing SQL query. supported databases: bigquery, couchbase, dax, db2, greenplum, hana, hive, impala, informix, mdx, mysql, netezza, openedge, oracle, postgresql, redshift, snowflake, sqlserver, sybase, teradata, vertica">
	<meta name="keywords" content="Analyzing SQL script, table, column, impact, data lineage, bigquery, couchbase, dax, db2, greenplum, hana, hive, impala, informix, mdx, mysql, netezza, openedge, oracle, postgresql, redshift, snowflake, sqlserver, sybase, teradata, vertica">
	<meta name="author" content="Gudu Software">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI=" crossorigin="anonymous"></script>

	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html {
			height: 100%;
		}

		body {
			font-family: Arial, sans-serif;
			height: 100%;
			-webkit-font-smoothing: antialiased;
		}

		button{
			padding: 2px 4px;
		}

		#left{
			float: left;
			width: 40%;
			height: 100%;
			padding:0 30px
		}
		textarea{
			display: block;
			height: 300px;
			width: 100%;
		}

		#app{
			float: right;
			width: 60%;
			height: 100%;
			position: relative;
			overflow: auto;
			background: #eee;
		}

		.operation, #setting{
			margin-top: 20px;
		}
	</style>

<link href="sqlflow.css" rel="stylesheet"></head>
<body>
	<div id="left">
		<label for="sqltext">sql：</label>
		<textarea id="sqltext">
					CREATE VIEW vsal
		AS
		  SELECT a.deptno                  "Department",
				 a.num_emp / b.total_count "Employees",
				 a.sal_sum / b.total_sal   "Salary"
		  FROM   (SELECT deptno,
						 Count()  num_emp,
						 SUM(sal) sal_sum
				  FROM   scott.emp
				  WHERE  city = 'NYC'
				  GROUP  BY deptno) a,
				 (SELECT Count()  total_count,
						 SUM(sal) total_sal
				  FROM   scott.emp
				  WHERE  city = 'NYC') b
		;

		INSERT ALL
			WHEN ottl < 100000 THEN
				INTO small_orders
					VALUES(oid, ottl, sid, cid)
			WHEN ottl > 100000 and ottl < 200000 THEN
				INTO medium_orders
					VALUES(oid, ottl, sid, cid)
			WHEN ottl > 200000 THEN
				into large_orders
					VALUES(oid, ottl, sid, cid)
			WHEN ottl > 290000 THEN
				INTO special_orders
		SELECT o.order_id oid, o.customer_id cid, o.order_total ottl,
		o.sales_rep_id sid, c.credit_limit cl, c.cust_email cem
		FROM orders o, customers c
		WHERE o.customer_id = c.customer_id;
		</textarea>
		<div class="operation">
			<label for="dbvendor">dbvendor : </label>
			<select id="dbvendor">
				<option value="bigquery">bigquery</option>
				<option value="couchbase">couchbase</option>
				<option value="db2">db2</option>
				<option value="greenplum">greenplum</option>
				<option value="hana">hana</option>
				<option value="hive">hive</option>
				<option value="impala">impala</option>
				<option value="informix">informix</option>
				<option value="mysql">mysql</option>
				<option value="mssql">mssql</option>
				<option value="netezza">netezza</option>
				<option value="openedge">openedge</option>
				<option value="oracle">oracle</option>
				<option value="postgresql">postgresql</option>
				<option value="redshift">redshift</option>
				<option value="snowflake">snowflake</option>
				<option value="sybase">sybase</option>
				<option value="teradata">teradata</option>
				<option value="vertica">vertica</option>
			</select>
			<button id="visualize">visualize</button>
			<button id="visualize_join">visualize join</button>
		</div>
		<div class="operation">
			<label>setting : </label>
			<button id="hide_all_columns">hide all columns</button>
			<button id="dataflow">dataflow</button>
			<button id="impact">impact</button>
			<button id="show_intermediate_recordset">show intermediate recordset</button>
			<button id="show_function">show function</button>
		</div>
		<div id="setting">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
	</div>
    <div id="app"></div>
<script type="text/javascript" src="sqlflow.js"></script></body>

<script>
	$(function () {
		var sqlflow = new SQLFlow({
			el: document.getElementById("app"),
		});

		var $sqltext = $("#sqltext");
		var $dbvendor = $("#dbvendor");
		var $visualize = $("#visualize");
		var $visualizeJoin = $("#visualize_join");
		var $hide_all_columns = $("#hide_all_columns");
		var $dataflow = $("#dataflow");
		var $impact = $("#impact");
		var $show_intermediate_recordset = $("#show_intermediate_recordset");
		var $show_functiont = $("#show_function");
		var $setting = $("#setting");

		$dbvendor.val("oracle");
		sqlflow.setSQLText($sqltext.val());
		sqlflow.setDbvendor($dbvendor.val());

		$visualize.on("click",function () {
			sqlflow.visualize();
		});

		$visualizeJoin.on("click",function () {
			sqlflow.visualizeJoin();
		});

		$sqltext.on("change",function () {
			sqlflow.setSQLText($sqltext.val());
		});

		$dbvendor.on("change",function () {
			sqlflow.setDbvendor($dbvendor.val());
		});

		$hide_all_columns.on("click",function () {
			sqlflow.setHideAllColumns(!sqlflow.setting.hideAllColumns);
			show_setting();
		});

		$dataflow.on("click",function () {
			sqlflow.setDataflow(!sqlflow.setting.dataflow);
			show_setting();
		});

		$impact.on("click",function () {
			sqlflow.setImpact(!sqlflow.setting.impact);
			show_setting();
		});

		$show_intermediate_recordset.on("click",function () {
			sqlflow.setShowIntermediateRecordset(!sqlflow.setting.showIntermediateRecordset);
			show_setting();
		});

		$show_intermediate_recordset.on("click",function () {
			sqlflow.setShowIntermediateRecordset(!sqlflow.setting.showIntermediateRecordset);
			show_setting();
		});

		$show_functiont.on("click",function () {
			sqlflow.setShowFunction(!sqlflow.setting.showFunction);
			show_setting();
		});

		function show_setting() {
			$setting.find("p").eq(0).text("hideAllColumns : " +  sqlflow.setting.hideAllColumns);
			$setting.find("p").eq(1).text("dataflow : " +  sqlflow.setting.dataflow);
			$setting.find("p").eq(2).text("impact : " +  sqlflow.setting.impact);
			$setting.find("p").eq(3).text("showIntermediateRecordset : " +  sqlflow.setting.showIntermediateRecordset);
			$setting.find("p").eq(4).text("showFunction : " +  sqlflow.setting.showFunction);
		}

		show_setting();
	});
</script>
</html>
